<template>
  <el-dialog title="商品审核" append-to-body :visible.sync="visible" 
  :before-close="handelCancle" @close='handelCancle()'>
    <div class="bg-white">
      <!-- <div class="page-header flex align-center space-between border_bottom_1">
        <div class="font-weight--lg font-size--lg">商品创建审核</div>
      </div> -->
      <div class="padding_15" id="baseInfo">
        <el-row>
          <el-col :span="12">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label">发起状态：</label>
              </div>
              <div>
                <div v-if="updateType == 0">创建审核</div> 
                <div v-else>编辑审核</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row v-if="updateType == 1">
          <el-col :span="12">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label price">改动原因：</label>
              </div>
              <div>
                <div v-if="baseInfo.launchRemark">{{ baseInfo.launchRemark }}</div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label price">商品名称：</label>
              </div>
              <div>
                <div v-if="baseInfo.title">{{ baseInfo.title }}</div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label price">商品分类：</label>
              </div>
              <div>
                <div v-if="baseInfo.categoryName">{{ baseInfo.categoryName }}</div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label">商品编码：</label>
              </div>
              <div>
                <div v-if="baseInfo.goodsNo">{{ baseInfo.goodsNo }}</div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label">商品品牌：</label>
              </div>
              <div>
                <div v-if="baseInfo.brandName">{{ baseInfo.brandName }}</div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label">商品供应商：</label>
              </div>
              <div>
                <div v-if="baseInfo.supplierName">{{ baseInfo.supplierName }}</div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label">商品图片：</label>
              </div>
              <div>
                <template v-if="baseInfo.surfaceImg" class="shopFengmian">
                  <div class="marsk">
                    <i class="el-icon-star-on"></i>
                    <div>封面</div>
                  </div>
                  <el-image class="shop_avator margin_10" :src="imgBaseUrl + baseInfo.surfaceImg" :preview-src-list="[imgBaseUrl + baseInfo.surfaceImg]" style="float: left"></el-image>
                </template>
                <div class="demo-image__preview" v-if="imgFileList && imgFileList.length" style="float: left">
                  <el-image class="shop_avator margin_10" v-for="(item, index) of imgFileList" :key="index" :src="item" :preview-src-list="imgFileList"></el-image>
                </div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="el-form-item">
              <div class="el-form-item el-form-item--medium">
                <label class="el-form-item__label">税率税码</label>
              </div>
              <div v-if="!baseInfo.taxNumber && !baseInfo.taxRate">
                <el-button @click="chooseRate">选择税码</el-button>
              </div>
              <div class="fl rate">
                <div class="el-form-item el-form-item--medium">
                  <label class="el-form-item__label">税码：</label>
                </div>
                <div>
                  <div v-if="baseInfo.taxNumber">{{ baseInfo.taxNumber }}</div>
                  <div v-else>无</div>
                </div>
              </div>
              <div class="fl">
                <div class="el-form-item el-form-item--medium">
                  <label class="el-form-item__label">税率：</label>
                </div>
                <div v-if="baseInfo.taxRate">{{ Number(baseInfo.taxRate)*100 + '%' }}</div>
                <div v-else>无</div>
              </div>
            </div>
          </el-col>
        </el-row>

        <!-- <el-row>
                    <el-col :span="24">
                        <div class="el-form-item">
                            <div class="el-form-item el-form-item--medium">
                                <label class="el-form-item__label">商品视频：</label>
                            </div>
                            <div>
                                <div class="demo-image__preview" v-if="videoFileList && videoFileList.length" style="float:left">
                                    <video class="shop_avator margin_10" v-for="(item, index) of videoFileList " :key="index" :src="item" controls="controls"></video>
                                </div>
                                <div v-else>无</div>
                            </div>
                        </div>
                    </el-col>
                </el-row> -->
      </div>
      <div class="padding_15">
        <el-table :data="skuList" stripe :header-cell-style="tableHeaderStyle">
          <el-table-column prop="skuNo" label="SKU编码"> </el-table-column>
          <el-table-column prop="surfaceImg" label="SKU图片">
            <template slot-scope="scope">
              <el-image class="shop_avator_sku" :src="imgBaseUrl + scope.row.imgUrl" :preview-src-list="[imgBaseUrl + scope.row.imgUrl]"></el-image>
            </template>
          </el-table-column>
          <el-table-column prop="propertyRelationsList" label="属性">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.propertyRelationsList" :key="index">{{ item.property }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="propertyRelationsList" label="属性值">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.propertyRelationsList" :key="index">{{ item.propertyValue }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="skuCostPrice" label="价格类型" v-if="!isIframe">
            <template slot-scope="scope">
              <div>{{ scope.row.skuCostPrice.name }}</div>
            </template>
          </el-table-column>
          <el-table-column prop="changePriceList" label="原价格">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.changePriceList" :key="index">
                <span v-if="item.value || item.value == 0">{{ item.priceName }}:{{ item.value }}</span>
                <span v-else>{{ item.priceName }}: --</span>
              </div>
            </template>
          </el-table-column>
          <!-- <el-table-column prop="updateList" label="原价格" v-if="changePrice">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.updateList" :key="index" class="price">
                {{type[item.targetType - 1]}}:{{ item.afterValue }}
              </div>
            </template>
          </el-table-column> -->
          <el-table-column prop="skuCostPrice" label="价格">
            <template slot-scope="scope">
              <div v-for="(item, index) in scope.row.skuCostPrice.children" :key="index">
                <span v-if="item.value">{{ item.priceName }}:{{ item.value }}</span>
                <span v-else>{{ item.priceName }}:--</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="qty" label="库存"></el-table-column>
        </el-table>
      </div>
      <div class="text-center">
          <el-button type="primary" @click="auditPass()">审核通过</el-button>
          <el-button type="info" @click="auditReject()">驳回</el-button>
          <el-button @click="handelCancle()">取消</el-button>
      </div>
      <el-dialog :visible.sync="rejectShow" append-to-body :destroy-on-close="true" title="驳回">
        <el-form>
            <el-form-item label="原因" required>
              <el-input type="textarea" v-model="remark" :rows="6" maxlength="200" show-word-limit></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="cancelModel()">取 消</el-button>
          <el-button type="primary" :loading="submitLoading" @click="closeModel()">确 定</el-button>
        </div>
      </el-dialog>
      <rate-list :visible.sync="isShowRateDialog" :selectedList="pageDataed" @selected="getSelectProperty"></rate-list>
    </div>
  </el-dialog>
</template>

<script>
import AppEditor from '@/components/AppEditor/index'
import Setting from '@/settings'
import RateList from '@/views/audit-center/components/rateList'
// import Tinymce from '@/components/Tinymce';
import { GetGoodsDetails, AuditGoods,EditRate } from '@/views/audit-center/services/index'
import { GetStoreItemDetail, GetAllStorePriceModel } from '@/views/store-management/services/index'
import * as defaultColor from '@/views/store-management/services/defaultColor'
export default {
  components: {
    AppEditor,
    RateList,
  },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    goodsId: {
      type: String,
      default: '',
    },
    taskId: {
      type: String,
      default: '',
    },
    // title: {
    //   type: String,
    //   default: '',
    // },
    // updateType: {
    //   type: Number,
    //   default: 0,
    // },
  },
  data() {
    return {
      title: '商品审核',
      baseInfo: {},
      instance: null,
      type: ['品牌','供应商','税码', 'B端销售价' ,'市场价' ,'C端售价', '采购价','最低售价'],
      skuList: [],
      fileList: [],
      imgFileList: [],
      videoFileList: [],
      tableHeaderStyle: Setting.tableHeaderStyle,
      imgBaseUrl: `${process.env.VUE_APP_FILE_URL}/`,
      baseUrl: process.env.VUE_APP_FILE_URL + '/',
      logList: [],
      imgUrl: '@/icons/svg/zip.svg',
      loading: false,
      multipleSelection: [],
      shangpinId: '',
      priceTypeList: [],
      isShow1: true,
      isShow2: true,
      isShow3: true,
      storeDetail: null,
      activeNames: ['1'],
      pageIndex: 0,
      noMoreLogData: false,
      id: '',
      isIframe: false,
      isShowRateDialog: false,
      pageDataed: [],
      updateType: 0,
      rejectShow: false, // 驳回原因的弹框的显示与否
      remark: '',
      submitLoading: false,
      changePriceList: [{
            priceName: "采购价",
            fieldName: "costPrice",
            value: null
        },
        {
            priceName: "B端销售价",
            fieldName: "supplyPrice",
            value: null
        },
        {
            priceName: "最低售价",
            fieldName: "minPrice",
            value: null
        },
        {
            priceName: "市场价",
            fieldName: "marketPrice",
            value: null
        },
        {
            priceName: "C端售价",
            fieldName: "suggestedPrice",
            value: null
        }
        ],
        changePrice: false,
        priceObj:{
            'costPrice':'beforeCostPrice',
            'supplyPrice':'beforeSupplyPrice',
            'minPrice':'beforeMinPrice',
            'suggestedPrice':'beforeSuggestedPrice',
            'marketPrice':'beforeMarketPrice'
          }
    }
  },
  watch: {
    visible(value) {
        if (value) {
          document.body.addEventListener('click', this.closeMenu)
        } else {
          document.body.removeEventListener('click', this.closeMenu)
        }
    },
    goodsId(val) {
      if(!val) return
      this.id = val
      this.getAllPrice()
      // this.getDetail()
    },
  },
  methods: {
    getDetail() {
      this.imgFileList = []
      GetGoodsDetails({
        id: this.id,
      })
        .then(data => {
          if (data.code == 200) {
            this.baseInfo = data.data.goods
            if (this.baseInfo.goodsFileList && this.baseInfo.goodsFileList.length) {
              this.baseInfo.goodsFileList.map(item => {
                if (item.fileType == 1) {
                  this.imgFileList.push(this.imgBaseUrl + item.fileUrl)
                }
              })
            }
            if (data.data.updRecordList && data.data.updRecordList.length) {
              this.updateType = 1
              this.skuList = data.data.updRecordList.map(item => {
              let skuType = this.priceTypeList.find(child => child.value == item.priceTemplateId)
              if (!skuType) {
                skuType = this.priceTypeList[0]
              }
              const newskuType = JSON.parse(JSON.stringify(skuType))
              item.skuCostPrice = newskuType
              
               let list =[]
               item.skuCostPrice.children.forEach(childItem => {
                  if(item.beforeCostPrice == null && item.beforeMarketPrice == null && item.beforeMinPrice == null && item.beforeSuggestedPrice == null && item.beforeSupplyPrice == null) {
                   childItem.value = item[childItem.fieldName]
                     list.push(childItem)
                  }
                 else{
                   childItem.value = item[childItem.fieldName]
                     list.push(childItem)
                 }
              })           
               item.skuCostPrice.children =[...list]
              // item.skuCostPrice.children.forEach(childItem => {
              //   childItem.value = item[childItem.fieldName]
              // })
              item.modelColor = item.modelColorId ? defaultColor.ColorList.find(color => color.id == item.modelColorId).name : '无'
              // if(item.beforeCostPrice == null && item.beforeMarketPrice == null && item.beforeMinPrice == null && item.beforeSuggestedPrice == null && item.beforeSupplyPrice == null) {
              //   this.changePrice = false
              // }else {
              //   this.changePrice = true
                   this.changePriceList[0].value = item.beforeCostPrice
                   this.changePriceList[3].value = item.beforeMarketPrice
                   this.changePriceList[2].value = item.beforeMinPrice
                   this.changePriceList[4].value = item.beforeSuggestedPrice
                   this.changePriceList[1].value = item.beforeSupplyPrice
                   item.changePriceList = this.changePriceList
                   console.log(item.changePriceList)
              // }
              return JSON.parse(JSON.stringify(item))
              
            })
              console.log(this.skuList)
            }else {
              // this.updateType = 0
            }
            if (data.data.updAudit) {
              this.updateType = data.data.updAudit.type
              this.baseInfo.auditRemark = data.data.updAudit.auditRemark
              this.baseInfo.launchRemark = data.data.updAudit.launchRemark
            }
            this.$set(this.baseInfo)
          } else {
            this.$message.error('商品基本信息加载失败!')
            return
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    //获取所有的价格模板
    getAllPrice() {
      GetAllStorePriceModel()
        .finally(() => this.getDetail())
        .then(data => {
          if (data.code == 200) {
            this.priceTypeList = data.data.map(item => {
              return {
                name: item.name,
                value: item.id,
                children: JSON.parse(item.selectionPrice.replace(/'/g, '"')).map(childItem => {
                  return {
                    priceName: childItem.priceName,
                    fieldName: childItem.fieldName,
                    remark: childItem.remark,
                    value: 0,
                  }
                }),
              }
            })
          }
        })
    },
    chooseRate() {
      this.isShowRateDialog = true
    },
    getSelectProperty(list) {
      console.log(list)
      this.pageDataed = list
      console.log(this.pageDataed)
      if(this.pageDataed.length) {
      this.baseInfo.taxNumber = this.pageDataed[0].taxNumber
      this.baseInfo.taxRate = this.pageDataed[0].taxRate
      this.baseInfo.taxId = this.pageDataed[0].id
      }
      // this.multipleSelection = list
    },
    auditReject() {
      this.rejectShow = true
    },
    handelCancle() {
      //  this.isShowRateDialog = false
       this.imgFileList = []
       this.baseInfo = {}
       this.$emit('update:visible', false)
       this.$emit('update')
    },
    // 点击填写驳回原因的取消按钮
    cancelModel() {
      this.remark = ''
      this.rejectShow = false
    },
    closeModel() {
      if(this.remark == '') {
        this.$message.warning("请填写驳回原因！")
        return
      }
      this.submitLoading = true
      AuditGoods({
        goodsId: this.baseInfo.id,
        taskId: this.taskId,
        status: '2',
        remark: this.remark,
        // taxId: this.baseInfo.taxId? this.baseInfo.taxId : '',
        // taxNumber: this.baseInfo.taxNumber? this.baseInfo.taxNumber : '',
        // taxRate: this.baseInfo.taxRate? this.baseInfo.taxRate : ''
      }).finally(() => this.submitLoading = false)
      .then(res =>{
        console.log(res)
        if(res.code == 200) {
          // this.submitLoading = false
          this.$message.success("审批完成！")
        }else {
          // this.submitLoading = false
          this.$message.error("审批失败！")
        }
        this.rejectShow = false
        this.remark = ''
        // this.submitLoading = false
        // this.isShowRateDialog = false
        this.$emit('update:visible', false)
        this.$emit('update')
        this.imgFileList = []
      })
    },
    //点击编辑按钮进行页面的跳转
    editXinXi(index) {
      if (index == 1) {
        this.isShow1 = !this.isShow1
      } else if (index == 2) {
        this.isShow2 = !this.isShow2
      } else {
        this.isShow3 = !this.isShow3
      }
    },
    auditPass() {
        console.log(this.baseInfo)
        if(this.baseInfo.taxNumber == '' || this.baseInfo.taxRate == '') {
           this.$message.warning("请选择税率税码！")
           return
        }
       AuditGoods({
           taskId: this.taskId,
           status: '1',
           goodsId: this.baseInfo.id,
           taxId: this.pageDataed.length == 0?'' : this.pageDataed[0].id,
           taxNumber: this.pageDataed.length == 0?this.baseInfo.taxNumber : this.pageDataed[0].taxNumber,
           taxRate: this.pageDataed.length == 0?this.baseInfo.taxRate : this.pageDataed[0].taxRate
       }).then(data => {
           console.log(data)
           if(data.code == 200) {
               this.$message.success('审批通过！')
           }else {
               this.$message.error("审批失败！")
           }
           this.$emit('update:visible', false)
           this.$emit('update')
       }).catch(err => {
           console.log(err)
       })
    },
  },
}
</script>

<style lang="scss" scoped>
.rate {
  width: 30%;
}
::v-deep .el-collapse-item__header {
  background: #f8fafb;
  padding: 15px;
  font-size: 18px;
  font-weight: 600;
}
.shop_avator {
  width: 160px;
  height: 160px;
}
.shop_avator_sku {
  width: 64px;
  height: 64px;
}
.shopFengmian {
  position: absolute;
  border-radius: 4px;
  align-items: center;
  justify-content: center;
  border: 1px dashed #dcdfe6;
  vertical-align: top;
}
.marsk {
  width: 32px;
  height: 32px;
  opacity: 0.9;
  background: #ffffff;
  border-top-right-radius: 10px;
  bottom: 0;
  left: 0;
  text-align: center;
  line-height: 1;
  position: absolute;
  margin: 37px 10px;
  z-index: 1;
  > div {
    color: #5a5e66;
    font-size: 12px;
    transform: scale(0.75);
  }
}
.marsk i {
  color: orange;
  font-size: 16px;
}
.el-form-item__label {
  width: 100px;
  text-align: left;
  color: #999999;
}

.el-form-item__content {
  margin-left: 100px;
  text-align: left;
  word-break: break-all;
}
.el-form-item__content1 {
  width: 70%;
  height: 300px;
  opacity: 1;
  border: 1px solid rgba(0, 0, 0, 0.2);
  padding: 0 10px;
  border-radius: 5px;
  overflow-y: scroll;
}
.el-form-item__content1 p img {
  width: 100px;
  height: 100px;
}
.skuItem {
  background: #f8fafb;
  color: #333333;
  padding-left: 10px;
  height: 64px;
  line-height: 64px;
  font-size: 18px;
}
.channelItem {
  width: 113px;
  height: 64px;
  opacity: 1;
  border: 1px solid #43425d;
  border-radius: 5px;
  line-height: 64px;
  text-align: center;
  font-weight: 400;
  float: left;
  margin-right: 20px;
}
.editBtn {
  margin-left: 80%;
  font-size: 14px;
}

.tagEntity {
  width: 70px;
  height: 24px;
  line-height: 24px;
  text-align: center;
  opacity: 1;
  background: #f0f2f5;
  border-radius: 3px;
  float: left;
  margin-right: 10px;
}
::v-deep .el-dialog {
  min-width: 80%;
  min-height: 60%;
}
.price {
  color: #D9001B;
}
</style>
